dd.project.ui.textbox({
    init:function()
    {
        dd.defs({
            linearGradient:{
                textbox_normal_background:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#BABABA", offset: 0},
                        {color:"#B9B9B9", offset: 1}
                    ]
                },
                textbox_normal_foreground:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#E8E8E8", offset: 0},
                        {color:"#FFF", offset: 0.2}
                    ]
                },
                textbox_selected_background:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#999", offset: 0},
                        {color:"#8D8D8D", offset: 1}
                    ]
                }
            }
        });
        dd.control("textbox", function(o)
        {
            o = o || {text:""};
            o.height = o.height || 12;
            o.width = o.width || 200;
            o.font = "font" in o ? o.font : {size:12};
            o._bo = {
                x: 0,
                y: navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 1 : 0
            };
            var control = dd(this.parent).group();
            dd(control).translate(o);
            var shadow = dd(control).rect(0, 3, o.width, o.font.size + 8, {
                r:3,
                opacity:0.8,
                fill:"#FFF"
            });
            var back = dd(control).rect(0, 0, o.width, o.font.size + 10, {
                r:3,
                fill:"url(#textbox_normal_background)"
            });
            var fore = dd(control).rect(1, 1, o.width - 2, o.font.size + 8, {
                r:3,
                fill:"url(#textbox_normal_foreground)"
            });
            var inputWrap = dd(dd.body).addElement("span");
            var input = dd(inputWrap).addElement("span", {
                contenteditable:"true"
            });
            dd(input).text = o.text;
            dd(input).css({
                display: "block",
                outline: "none",
                color: "#444",
                cursor: "text",
                padding: "0 6px 0 6px",
                lineHeight: (o.font.size + 10) + "px",
                height: (o.font.size + 10) + "px",
                overflow: "hidden"
            });
            dd(inputWrap).css({
                display: "block",
                position:"absolute",
                left: (o.x + o._bo.x) + "px",
                top: (o.y + o._bo.y) + "px",
                width: o.width + "px",
                fontFamily:"Verdana",
                fontSize:"12px"
            });
            dd(input).event({
                keypress: function()
                {
                    if(this.key.enter)
                    {
                        return false;
                    }
                    return true;
                },
                focus: function()
                {
                    dd(this).css({"color":"#000"});
                    dd(this.back).style({
                        fill:"url(#textbox_selected_background)"
                    });
                },
                blur: function()
                {
                    dd(this).css({"color":"#444"});
                    dd(this.back).style({
                        fill:"url(#textbox_normal_background)"
                    });
                }
            }, {back:back});
            this.property("x", {
                get:function()
                {
                    return dd(this.control).x;
                },
                set:function(v)
                {
                    dd(inputWrap).css({ left: v + "px"});
                    return dd(this.control).x = v;
                }
            }, {control:control, inputWrap:inputWrap});
            this.property("y", {
                get:function()
                {
                    return dd(this.control).y;
                },
                set:function(v)
                {
                    dd(inputWrap).css({ top: v + "px"});
                    return dd(this.control).y = v;
                }
            }, {control:control, inputWrap:inputWrap});
        });
    }
});